<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="type,index in typeList" :label="type.name" :key="type.id" :name="type.id">
                <imgsList :data="list" ref="list1" v-loading="loading"></imgsList>
                <div class="foot_container">
                    <el-pagination
                        v-if="page.totalPage"
                        :page-count="page.totalPage"
                        style="display:inline-block;"
                        background
                        layout="prev, pager, next"
                        @current-change="currentChange"
                    ></el-pagination>
                    <el-button type="primary" class="btn" round @click="selectThisImg('list1',index)">确 定</el-button>
                    <el-button type="primary" plain class="btn" round @click="close">取 消</el-button>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import imgsList from './imgsList';
export default {
    components: {
        imgsList,
    },
    props: {
        typeList: {
            type: Array,
            default: () => [{}],
            required: true,
        },
        list: {
            type: Array,
            default: () => [],
            required: true,
        },
        page: {
            type: Object,
            default: () => {},
            required: true,
        },
        loading:{
          type:Boolean,
          default:false
        }
    },
    data() {
        return {
            activeName:
                (this.typeList && this.typeList[0] && this.typeList[0].id) ||
                '',
            isDelete: false,
            isAddMenu:false,
            addMenuInput:""
        };
    },
    watch: {
        isDelete(newValue, oldValue) {
            console.log('11newValue :', newValue);
        },
        list(n, v) {
            console.log('n :', n);
            const { pageIndex, pageSize, totalPage } = n;
        },
    },
    methods: {
        handleClick(tab) {
            this.$emit('handleClick', tab);
        },
        currentChange(page) {
          this.$emit("pageChange",page);
        },
        selectThisImg(ref,index) {
            var curImgId = this.$refs[ref][index].currentSelectId;
            var cutImg = this.$refs[ref][index].currentSelect;
            if (curImgId && cutImg) {
                this.$emit('selected', cutImg);
                this.$refs[ref][index].clearSelcted();
                this.close();
            } else {
                this.$message.error('还没有选择哦！');
            }
        },
        close() {
            this.$emit('close');
        },
    },
};
</script>

<style lang="scss" scoped>
.foot_container {
    text-align: center;
    padding:10px 0;
    // margin: 10px 0;
    border-top:2px solid #E4E7ED;
    .btn {
        float: right;
        margin-right: 6px;
    }
}
</style>